/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-01-28 22:35:25
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-13 14:52:28
 * @FilePath: \utils_react_manager\app\src\router\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Suspense, lazy } from 'react';
// Navigate重定向
import { Navigate } from 'react-router-dom';

import Login from '@/views/Login';
const Layout = lazy(() => import('@/views/Layout'));
const Home = lazy(() => import('@/views/Home'));
const Word = lazy(() => import('@/views/Word'));
const Learn = lazy(() => import('@/views/Learn'));
const User = lazy(() => import('@/views/User'));

// 懒加载的模式的组件的写法，外面需要套一层 Loading 的提示加载组件
const widthLoadingComp = (comp: JSX.Element) => (
  <Suspense fallback={<div>Loading</div>}>
    { comp }
  </Suspense>
);

const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: '/',
    element: widthLoadingComp(<Layout />),
    children: [
      {
        path: '/home',
        element: widthLoadingComp(<Home />)
      },
      {
        path: '/word',
        element: widthLoadingComp(<Word />)
      },
      {
        path: '/learn',
        element: widthLoadingComp(<Learn />)
      },
      {
        path: '/user',
        element: widthLoadingComp(<User />)
      }
    ]
  },
  {
    path: '/login',
    element: widthLoadingComp(<Login />)
  }
];


export default routes;